<template>
  <div>
    <div class="homepage" v-show="!show">
      <div class="zhssce">
        <van-field v-model="search" @keyup.enter="onsearch" placeholder="搜索" />
        <div class="zhssceer" @touchstart="onsearch">
          <span>搜索</span>
        </div>
      </div>
      <div class="nvebarzxzw">
        <span class="zwlbzxzw">最新职位</span>
        <button class="zwlbzxgdsx" @touchstart="onClickRight('defaxk',1)">筛选</button>
      </div>
      <div>
        <van-list v-model="loading" :finished="finished" :immediate-check="false" @load="onLoad" :offset="30">
          <div class="zwlb fixt">
            <div v-if="list.length===0">暂无数据</div>
            <ul>
              <li v-for="(item,index) in list" @click="jobdetails(item.id,item.companyId,item.category)"
                :key="index+'list'">
                <div class="zwlbnr">
                  <p class="zwlbbt">
                    {{item.name}}
                    <span class="zwlbsj zwlbsjxz" style="color:red">{{item.wageText}}</span>
                  </p>
                  <p>
                    {{item.educationText?item.educationText:item.educationText===''?"不限":item.educationText}}
                    <span class="zwfg">|</span>
                    {{item.workExpText?item.workExpText:item.workExpText===''?"不限":item.workExpText}}
                  </p>
                  <p>
                    <span>{{item.companyName?item.companyName:""}}</span>
                    <span class="zwlbsj">{{item.refreshTime}}</span>
                  </p>
                </div>
              </li>
            </ul>
          </div>
        </van-list>
      </div>
    </div>
    <dressing v-show="show" ref="Dressing" v-on:onClickRight="onClickRight"></dressing>
    <div class="overlay" v-show="show" style="top:0"></div>
  </div>
</template>
<script>
import POSITIONLIST from '@/api/PositionList'
import timedate from '@/assets/js/datatime'
import Dressing from '@/components/dressing/dressing'
import { _debounce } from '@/assets/js/public'
import { DropdownMenu, DropdownItem } from 'vant'
export default {
  components: {
    Dressing,
    [DropdownItem.name]: DropdownItem,
    [DropdownMenu.name]: DropdownMenu

  },
  data () {
    return {
      search: '',
      loading: false,
      show: false,
      condition: [
        { column: 'status', type: 'eq', value: 1 },
        { column: 'include', type: '', value: 'D,CN' }
      ],
      pageInfo: {
        page: 1,
        size: 20
      },
      list: [],
      finished: false
    }
  },
  computed: {},
  methods: {
    // 筛选
    onClickRight (condition, num) {
      this.show = !this.show
      this.search = ''
      if (condition !== 'defaxk' && num !== 1) {
        this.condition = condition
        this.pageInfo.page = 1
        this.list = []
        this.positionList()
        this.$forceUpdate()
      }
    },
    // 搜索
    onsearch () {
      this.pageInfo.page = 1
      this.condition = []
      this.list = []
      if (this.condition.length !== 0) {
        this.condition.splice(0, 1)
      }

      this.condition.unshift(
        {
          column: 'company_job_name',
          type: '',
          value: this.search
        },
        { column: 'status', type: 'eq', value: 1 },
        { column: 'include', type: '', value: 'D,CN' }
      )
      this.loading = true
      this.positionList()
    },
    // 职位列表
    positionList () {
      let that = this
      let sort = [{ column: 'refresh_time', type: 'desc' }]

      var formData = new FormData()
      formData.append('page', this.pageInfo.page)
      formData.append('size', this.pageInfo.size)
      if (this.condition.length !== 0) {
        formData.append('condition', JSON.stringify(this.condition))
      }
      formData.append('sort', JSON.stringify(sort))

      POSITIONLIST.jobListPage(formData).then(res => {
        console.log(res.data)
        that.loading = false
        if (res.data.code === 200) {
          if (!res.data.data.records || res.data.data.records.length === 0) {
            // 加载结束
            that.finished = true
            return
          } else {
            for (let i = 0; i < res.data.data.records.length; i++) {
              res.data.data.records[i].refreshTime = timedate(
                res.data.data.records[i].refreshTime
              )
            }
            for (let i = 0; i < res.data.data.records.length; i++) {
              that.list.push(res.data.data.records[i])
            }
            that.finished = false
          }

          // 如果列表数据条数>=总条数，不再触发滚动加载
          if (that.list.length >= res.data.data.total) {
            that.finished = true
          }
        }
        console.log(that.finished, 'that.finished ')
      })
    },
    // 详情跳转
    jobdetails (id, companyId, category) {
      this.$router.push({
        name: 'Jobdetails',
        query: {
          id: id,
          companyId: companyId,
          category: category
        }
      })
    },
    // 上拉加载
    onLoad: _debounce(function (_type, index, item) {
      let that = this

      // that.loading = false
      setTimeout(() => {
        that.pageInfo.page++
        that.positionList()
      }, 200)
    }, 1000)
  },
  created () {
    if (this.$route.query.search) {
      this.search = this.$route.query.search
      this.condition.unshift(
        {
          column: 'company_job_name',
          type: '',
          value: this.search
        },
        { column: 'status', type: 'eq', value: 1 },
        { column: 'include', type: '', value: 'D,CN' }
      )
    }
    this.positionList()
  }
}
</script>
<style scoped></style>
